<template>
	<view class="demandDetails ff-font-14 ff-color-222 ">
		<view :class="{ 'ff-padding-bottom-80': !demandDetails.responsePrice}">
			<view class="demandDetails-header">
				<image class="demandDetails-header-bg"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/compang-details-bg.png"
					mode=""></image>
			</view>
			<view class="demandDetails-header-content ff-font-13 ff-line-height-1-3 ff-bg-fff ff-border-radius-10">
				<view class="ff-flex-between title ff-margin-bottom-10">
					<view class="ff-font-16 ff-font-weight-600"
						:class="{ 'ff-width-250': demandDetails.responsePrice && demandDetails.testStatus == 2 }">
						{{ demandDetails.testName }}
					</view>
					<view class="fraction ff-color-fff"
						v-if="demandDetails.responsePrice && demandDetails.testStatus == 2">已响应</view>
				</view>
				<view class="ff-flex ff-margin-bottom-8">
					<view class="demandDetails-title">更新于：</view>
					<view class="ff-flex-1">
						{{ demandDetails.modified == null ? '/' : demandDetails.modified.substr(0, demandDetails.modified.length - 3) }}
					</view>
				</view>
				<view class="ff-flex ff-margin-bottom-8">
					<view class="demandDetails-title">委托单位：</view>
					<view class="ff-flex-1">{{ demandDetails.companyName }}</view>
				</view>
				<view class="ff-flex">
					<view class="demandDetails-title">工程地址：</view>
					<view class="ff-flex-1">{{ demandDetails.testAddr }} |
						距离您{{ nearest == null ? '0' : nearest / 1000 }}km</view>
				</view>
			</view>
			<view class="demandDetails-content ff-margin-left-12 ff-margin-right-12">
				<view class="demandDetails-content-box">
					<view class="ff-bg-fff ff-margin-bottom-10 ff-border-radius-10 ff-padding-10"
						v-if="demandDetails.price">
						<view
							class="demandDetails-content-title ff-font-16 ff-font-weight-600 ff-color-blue ff-border-radius-5">
							响应详情</view>
						<view class="demandDetails-content-info ff-margin-top-15">
							<view class="demandDetails-content-info-box ff-flex">
								<view class="demandDetails-content-info-box-left ff-padding-left-5 ff-margin-right-15">
									<view class="ff-margin-bottom-16">响 应 人</view>
									<view class="ff-margin-bottom-16">响应状态</view>
									<view class="ff-margin-bottom-16">响应时间</view>
									<view class="ff-margin-bottom-16">响应金额(元)</view>
								</view>
								<view>
									<view class="ff-margin-bottom-16">{{ demandDetails.responseUserName || '/' }}</view>
									<view class="ff-margin-bottom-16">已响应</view>
									<view class="ff-margin-bottom-16">{{ demandDetails.responseUserTime || '/'  }}
									</view>
									<view class="ff-margin-bottom-16">{{ demandDetails.price || '/'  }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="ff-bg-fff ff-margin-bottom-10 ff-border-radius-10 ff-padding-10">
						<view
							class="demandDetails-content-title ff-font-16 ff-font-weight-600 ff-color-blue ff-border-radius-5">
							需求详情</view>
						<view class="demandDetails-content-info ff-margin-top-15 ff-line-height-1-3">
							<view class="demandDetails-content-info-box">
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">检测类型</view>
									<view>{{ demandDetails.testProjectTypeName }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">委托单位</view>
									<view class="ff-flex-1">{{ demandDetails.companyName }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">建筑面积(m²)</view>
									<view>{{ demandDetails.testProjectArea }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">建筑高度(m)</view>
									<view>{{ demandDetails.testProjectHeight }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">建筑地上层数</view>
									<view>{{ demandDetails.buildingUpLayers }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">建筑地下层数</view>
									<view>{{ demandDetails.buildingDownLayers }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">检测范围</view>
									<view class="ff-flex-1">{{ demandDetails.testScope }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">项目预算(元)</view>
									<view>{{ demandDetails.testProjectBudget }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">联 系 人</view>
									<view>{{ demandDetails.testProjectLink }}</view>
								</view>
								<view class="ff-flex ff-padding-left-5 ff-margin-right-5 ff-margin-bottom-16">
									<view class="demandDetails-content-info-box-left">联系电话</view>
									<view>{{ demandDetails.testProjectPhone }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="demandDetails-content-table">
						<view class="ff-bg-fff ff-padding-10 ff-border-radius-10 ff-margin-bottom-10 ff-bg-fff">
							<view
								class="demandDetails-content-title ff-font-16 ff-font-weight-600 ff-color-blue ff-border-radius-5 ff-margin-bottom-15">
								检测项目</view>
							<view class="ff-padding-left-4">
								<view class="ff-flex-wrap">
									<view class="ff-margin-right-10 ff-margin-bottom-10"
										v-for="(item, index) of demandDetails.facilities" :key="index">
										<u-tag :text="`${index + 1}.${item.facilitiesTypeName}`" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="demandDetails-content-but"
				v-if="roleStatus == 2 && demandDetails.isResponse == 1 && (demandDetails.testStatus == 2)">
				<u-button shape="circle" type="success" @click="cancelResponse(demandDetails.id)">取消响应</u-button>
			</view>
		</view>
		<view class="demandDetails-fixed-but ff-align-items-one ff-bg-fff ff-padding-bottom-10"
			v-if="roleStatus == 2 && demandDetails.isResponse == 0">
			<view class="demandDetails-fixed-but-box ff-flex-between">
				<view class="ff-align-items-one ff-font-15">
					<u-input class="ff-margin-right-5 ff-font-15" v-model.trim="demandPrice" type="digit"
						:always-embed="true" :adjust-position="true" cursor-spacing="30" placeholder="请输入您的报价"
						@input="demandPriceBlur" :clearable="false" :border="true" />
					元
				</view>
				<view><u-button shape="circle" size="medium" type="primary"
						@click="responseClick(demandDetails.id)">响应</u-button></view>
			</view>
		</view>
		<!-- 未获取到定位示弹框 -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
		<u-modal v-model="faceModal" title="录制活体人脸视频警告" :content-style="{ 'line-height': '1.5' }" @confirm="faceConfirm"
			:show-cancel-button="true" cancel-text="取消认证" confirm-text="开始认证"
			content="为了保障人脸识别的准确性，在视频录制过程中，请将面部正对手机摄像头，并读出：消防技术服务。" />
		<u-modal v-model="cancelResponseModal" title="取消响应" :content-style="{ 'line-height': '1.5' }"
			:show-cancel-button="true" @confirm="cancelResponseClick" :content="cancelResponseContent" />
		<!-- 认证失败弹框 -->
		<u-modal :title="failTitle" v-model="failModal" :content-style="{ 'line-height': '1.5' }"
			:content="failContent" />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import config from '@/tools/config.js';
	export default {
		name: 'demandDetails',
		data() {
			return {
				triggered: false,
				faceModal: false, // 人脸认证弹框显/隐
				// 失败弹框系列
				failTitle: '', // 失败弹框的标题
				failContent: '', // 失败弹框的提示语
				failModal: false, // 失败弹框的显/隐
				locationModal: false, // 定位失败弹框显/隐
				// 取消响应系列
				cancelResponseModal: false, // 取消响应显/隐
				cancelResponseContent: '', // 取消响应内容
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				// 获取需求详情页请求的参数
				params: {
					testId: '',
					longitude: '',
					latitude: ''
				},
				demandDetails: {}, // 需求详情页数据
				demandPrice: '', // 响应金额
				// 人脸识别相关
				faceInfo: {
					faceState: false, // 人脸识别（通过true，不通过false）
					sessionId: '', // 百度sessionId
					accessToken: '', // 百度accesstoken
					sessionCode: '', // 用户需要大声读出数字
					videoPath: '', // 上传视频后返回的临时视频路径
					videoBase64: '', // 视频base64
					imageBase64: '' // 图片base64
				},
				nearest: '' // 距离相隔
			};
		},
		onLoad(e) {
			let that = this;
			that.params.testId = e.id; // ;
			this.nearest = e.nearest
			// 获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					// console.log('当前位置的经度-----：', res);
					that.params.latitude = res.latitude;
					that.params.longitude = res.longitude;
					that.getdemandDetails(); // 获取项目详情页数据
				},
				fail(error) {
					// console.log('位置定位失败返回----', error);
					that.locationModal = true;
				}
			});
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		computed: {
			...mapState({
				roleStatus: modules => modules.infoList.roleStatus,
				userInfo: modules => modules.infoList.userInfo
			})
		},
		methods: {
			// 获取需求详情页数据
			async getdemandDetails() {
				this.$refs.loading.openLoading('加载中···');
				const data = await this.$http.post({
					url: '/bsTestProjectInfo/org/info',
					data: this.params
				});
				// console.log('获取需求详情页数据------', data);
				if (data.code == 200) {
					this.demandDetails = data.data;
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading();
			},
			// 响应（只有管理员才能响应）
			responseClick(id) {
				if (!this.$check.numberCheckPoint(this.demandPrice)) {
					this.$refs.uToast.show({
						title: '报价必须为整数或小数点后两位',
						type: 'error'
					});
					return;
				}
				this.faceModal = true; // 开始刷脸
			},
			// 项目预算至多只能输入小数点后俩位
			demandPriceBlur(val) {
				this.$nextTick(() => {
					this.demandPrice = (val.match(/^\d*(\.?\d{0,2})/g)[0]) ||
						null // 保留小数点后俩位
				})
			},
			// 确认--并开始视频认证
			faceConfirm() {
				let that = this;
				uni.chooseVideo({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					maxDuration: 5,
					camera: 'front',
					success(res) {
						// console.log('录制视频的地址返回的--------', res.tempFilePath);
						that.faceInfo.videoPath = res.tempFilePath;
						that.$refs.loading.openLoading('活体认证中，请稍候'); // 打开loading动画
						uni.getFileSystemManager().readFile({
							filePath: that.faceInfo.videoPath,
							encoding: 'base64', //编码格式
							success: res => {
								// console.log('视频转base64---', res);
								that.faceInfo.videoBase64 = res.data;
								that.$http
									.post({
										url: '/maintenance/cutVideoV2',
										data: {
											video: that.faceInfo.videoBase64
										}
									})
									.then(res => {
										if (res.code == 200 && res.success) {
											// console.log('后台视频分析返回图片base64----', res.data);
											if (res.data.length != 0) {
												that.faceInfo.imageBase64 = res.data[0];
												that.startVideoFaceProcess(that.faceInfo
													.imageBase64); // 活体检测
											} else {
												that.$refs.loading.closeLoading(); // 关闭loading动画
												that.failTitle = '认证失败'; // 失败的标题
												that.failContent = '人脸活体视频解析失败，请重新操作!'; // 失败的提示语
												that.failModal = true; // 失败弹框的显/隐
											}
										} else {
											that.$refs.loading.closeLoading(); // 关闭loading动画
											that.failTitle = '认证失败'; // 失败的标题
											that.failContent = res.msg; // 失败的提示语
											that.failModal = true; // 失败弹框的显/隐
										}
									});
							},
							fail: res => {
								that.$refs.loading.closeLoading(); // 关闭loading动画
								that.failTitle = '认证失败'; // 失败的标题
								that.failContent = '人脸认证出现错误，请联系管理员！'; // 失败的提示语
								that.failModal = true; // 失败弹框的显/隐
							}
						});
					},
					fail(res) {
						that.$refs.loading.closeLoading(); // 关闭loading动画
						that.failTitle = '认证失败'; // 失败的标题
						that.failContent = '请进行身份认证，否则无法注册！'; // 失败的提示语
						that.failModal = true; // 失败弹框的显/隐
					}
				});
			},
			// 活体检测
			startVideoFaceProcess(imageBase64) {
				let that = this;
				uni.request({
					url: 'https://aip.baidubce.com/oauth/2.0/token', //是真实的接口地址
					data: {
						grant_type: config.baidu_grant_type,
						client_id: config.baidu_client_id,
						client_secret: config.baidu_client_secret
					},
					header: {
						'Content-Type': 'application/json'
					},
					success(res) {
						// console.log('活体token--------', res);
						that.faceInfo.accessToken = res.data.access_token; //获取到token
						//活体检测
						uni.request({
							url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceverify?access_token=' +
								that.faceInfo.accessToken,
							method: 'POST',
							data: [{
								image: imageBase64,
								image_type: 'BASE64'
							}],
							header: {
								'Content-Type': 'application/json'
							},
							success(res) {
								// console.log('活体人脸检测返回-----', res);
								if (res.data.error_code == 0 && res.data.result.face_liveness >= 0.8) {
									// 查询百度库人脸
									uni.request({
										url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' +
											that.faceInfo.accessToken,
										method: 'POST',
										data: {
											image: imageBase64,
											image_type: 'BASE64',
											group_id_list: config.baidu_group_id, // xfwb_group
											liveness_control: 'NORMAL',
											user_id: config.baidu_userid_pre + that.userInfo
												.userIdCard //'hajc_'+that.userInfo.userIdCard
										},
										header: {
											'Content-Type': 'application/json'
										},
										success(res) {
											// console.log('查询百度库人脸---------返回', res);
											if (
												res.data.error_msg == 'SUCCESS' &&
												res.data.result.user_list[0].user_id == config
												.baidu_userid_pre + that.userInfo.userIdCard &&
												res.data.result.user_list[0].score > 80
											) {
												// console.log('上传人脸检测结果------', res);
												that.imgUpate(); // 上传照片到阿里云
											} else if (res.data.error_code == '222207') {
												that.$refs.loading.closeLoading(); // 关闭loading动画
												that.failTitle = '认证失败'; // 失败的标题
												that.failContent =
													'为了提升消防服务执业的效率，消防小程序将进行一次全面的升级。请依次点击【我的】-【比对公安人证信息】进行操作。感谢您的配合！'; // 失败的提示语
												that.failModal = true; // 失败弹框的显/隐
											} else {
												that.$refs.loading.closeLoading(); // 关闭loading动画
												that.failTitle = '认证失败'; // 失败的标题
												that.failContent = '请使用所属帐号本人的头像认证！'; // 失败的提示语
												that.failModal = true; // 失败弹框的显/隐
											}
										},
										fail(res) {
											that.$refs.loading.closeLoading(); // 关闭loading动画
											that.failTitle = '认证失败'; // 失败的标题
											that.failContent = '请出现错误，人脸搜索系统异常！'; // 失败的提示语
											that.failModal = true; // 失败弹框的显/隐
										}
									});
								} else {
									that.$refs.loading.closeLoading(); // 关闭loading动画
									that.failTitle = '认证失败'; // 失败的标题
									that.failContent = '请确保是本人操作！'; // 失败的提示语
									that.failModal = true; // 失败弹框的显/隐
								}
							}
						});
					},
					fail(res) {
						that.$refs.loading.closeLoading(); // 关闭loading动画
						that.failTitle = '认证失败'; // 失败的标题
						that.failContent = '请重新认证！'; // 失败的提示语
						that.failModal = true; // 失败弹框的显/隐
					}
				});
			},
			// 活体截图上传到阿里云
			imgUpate() {
				let that = this;
				let fileImgPath = wx.env.USER_DATA_PATH + '/fire_response.png'; // 微信小程序临时文件位置
				// 获取全局唯一的文件管理器, base64填充到图片地址中
				uni.getFileSystemManager().writeFile({
					filePath: fileImgPath, //创建一个临时文件名
					data: that.faceInfo.imageBase64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						// 调取oss图片方法
						that.$uploadImg.uploadImgOSSBase64(fileImgPath, 3).then(resPortrait => {
							// console.log('活体截图上传到阿里云返回的数据-------' + resPortrait);
							if (resPortrait != null && resPortrait.length > 0) {
								that.responseConfirm(resPortrait); // 响应操作！
							} else {
								that.$refs.loading.closeLoading(); // 关闭loading动画
								that.failTitle = '认证失败'; // 失败的标题
								that.failContent = '人脸上传失败，请检查网络是否正常！'; // 失败的提示语
								that.failModal = true; // 失败弹框的显/隐
							}
						});
					},
					fail: err => {
						that.$refs.loading.closeLoading(); // 关闭loading动画
						that.failTitle = '认证失败'; // 失败的标题
						that.failContent = err; // 失败的提示语
						that.failModal = true; // 失败弹框的显/隐
					}
				});
			},
			// 响应操作！
			responseConfirm(imgUrl) {
				let that = this;
				let params = {
					testId: this.demandDetails.id,
					price: this.demandPrice,
					responseFaceUrl: imgUrl
				};
				that.$http
					.post({
						url: '/bsTestProjectInfo/org/project/response',
						data: params
					})
					.then(res => {
						// console.log('响应结果-----', res);
						if (res.code == 200 && res.success) {
							that.scrollTopList.scrollTop = 0;
							that.$refs.loading.closeLoading(); // 关闭loading动画
							that.$refs.uToast.show({
								title: '提交响应信息成功！',
								type: 'success'
							});
							that.demandPrice = '';
							that.getdemandDetails(); // 重新获取详情接口
						} else {
							that.$refs.loading.closeLoading(); // 关闭loading动画
							that.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
					});
			},
			// 取消响应
			cancelResponse() {
				this.cancelResponseContent = `您确定取消“${this.demandDetails.testName}”项目的响应吗？`;
				this.cancelResponseModal = true;
			},
			// 取消响应--确定操作
			cancelResponseClick() {
				this.$refs.loading.openLoading('取消响应中'); // 打开loading动画
				this.$http.post({
					url: `/bsTestProjectInfo/org/response/cancel/${this.demandDetails.id}`
				}).then(res => {
					// console.log('管理员取消响应---', res.data);
					if (res.code == 200) {
						this.scrollTopList.scrollTop = 0;
						this.$refs.uToast.show({
							title: '取消响应成功！',
							type: 'success'
						});
						this.getdemandDetails(); // 重新获取详情接口
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
				});
				this.$refs.loading.closeLoading(); // 关闭loading动画
			}
		}
	};
</script>
<style lang="scss">
	.demandDetails {
		.u-size-default {
			height: auto !important;
		}
	}
</style>
<style lang="scss" scoped>
	.demandDetails {
		position: relative;
		// height: 100vh;
		overflow: hidden;

		.scroll-view {
			height: 100vh;
			box-sizing: border-box;
		}

		.line {
			height: 60rpx;
			background-color: #f5f5f5;
		}

		&-header {
			background-color: #3178ff;
			height: 380rpx;

			&-bg {
				width: 100%;
				height: 380rpx;
			}

			&-content {
				padding: 24rpx 24rpx;
				margin: -350rpx 24rpx 20rpx;
				position: relative;
				z-index: 9;

				.title {
					align-items: center;
				}

				.fraction {
					font-size: 26rpx;
					background-color: #ff6f00;
					padding: 12rpx 22rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}

				.ff-align-items-one {
					margin: 6rpx 0 16.5rpx;

					.tips1 {
						border: 2rpx solid #2b68ff;
						color: #2b68ff;
						padding: 10rpx 15rpx;
						border-radius: 8rpx;
						margin-top: 8.5rpx;
						// margin-bottom: 8.5rpx;
					}

					.tips2 {
						border: 2rpx solid #f0403d;
						color: #f0403d;
						padding: 10rpx 15rpx;
						border-radius: 8rpx;
						margin-top: 8.5rpx;
						// margin-bottom: 8.5rpx;
					}

					.tips3 {
						border: 2rpx solid #fef8e3;
						background-color: #fef8e3;
						color: #ef8732;
						padding: 10rpx 15rpx;
						border-radius: 8rpx;
						margin-top: 8.5rpx;
						// margin-bottom: 8.5rpx;
					}

					.tips4 {
						border: 2rpx solid #ef312e;
						background-color: #ef312e;
						padding: 10rpx 15rpx;
						border-radius: 8rpx;
						margin-top: 8.5rpx;
						// margin-bottom: 8.5rpx;
					}
				}

				&-address {
					color: #5c5f65;
					margin-bottom: 15rpx;
				}

				&-time {
					color: #5c5f65;
				}
			}

			&-tabber {
				box-sizing: 4rpx 4rpx 4rpx red;
				margin: 0 3%;
				width: 94%;
				margin-bottom: -70rpx;
				overflow: hidden;

				/deep/.u-subsection {
					border-radius: 16rpx !important;
				}

				.left-icon {
					position: relative;
					top: -8rpx;
					left: 22%;
					width: 35rpx;
					height: 18rpx;
					z-index: 9;
				}

				.right-icon {
					position: relative;
					top: -8rpx;
					left: 73%;
					width: 35rpx;
					height: 18rpx;
					z-index: 999;
				}
			}
		}

		&-content {
			position: relative;

			&-title {
				background: linear-gradient(to right, #e5eeff, #ffffff);
				padding: 24rpx 20rpx 20rpx;
			}

			&-info {
				&-box {
					&-left {
						width: 40%;
						color: #a6a6a6;
					}

					&-right {
						flex: 1;
					}
				}
			}

			&-table {
				padding-bottom: 80rpx;

				&-box {
					margin-bottom: 50rpx;

					.ff-flex {
						padding: 24rpx 58rpx;

						.table-left-title {
							width: 70%;
							margin-right: 10%;
						}

						.table-left {
							width: 70%;
							margin-right: 10%;
							color: #5c5f65;
						}

						.table-right {
							flex: 1;
						}
					}
				}
			}

			.demandDetails-tableBox:last-child .demandDetails-table-box {
				margin-bottom: 0;
			}

			&-table .ff-flex:nth-child(odd) {
				background-color: #f8f8f8;
			}

			&-but {
				margin: 0 5%;
				padding: 80rpx 5% 200rpx;
				width: 90%;
			}
		}

		&-fixed-but {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9999;
			width: 100%;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			// padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			background-color: #ffffff;

			&-box {
				width: 100%;
				padding: 25rpx 30rpx;

				view:first-child {
					width: 50%;
				}
			}
		}

		/deep/.u-btn--success {
			color: #b5bbc8;
			border-color: #ffffff;
			background-color: #ffffff !important;
			height: 90rpx !important;
			line-height: 90rpx !important;
		}

		/deep/.u-btn--success--plain {
			background-color: #ffffff !important;
		}

		/deep/.u-btn--success--disabled {
			padding: 0rpx 46rpx !important;
		}

		/deep/.u-btn--primary {
			height: 80rpx !important;
			line-height: 80rpx !important;
		}
	}

	.demandDetails-content-tableBox:last-child .demandDetails-content-table-box {
		margin-bottom: 0;
	}

	.ff-width-250 {
		width: 460rpx;
	}

	.demandDetails-title {
		width: 140rpx;
	}
</style>